<template>
  <div
    style="
      padding: 20px;
      width: 297mm;
      min-height: calc(100vh - 40px);
      margin: 0 auto;
    "
  >
    <div class="header" style="display: flex; justify-content: space-between">
      <router-link to="/main/xingzheng/gudingzichan" style=""
        ><el-button type="primary" icon="el-icon-back"
          >返回</el-button
        ></router-link
      >
      <span>
        <router-link
          to="/main/xingzheng/gdzczhuxiao/gdzczhuxiaoList"
          style="margin-right: 10px"
          ><el-button type="" icon="el-icon-menu">列表</el-button></router-link
        >
        <el-button
          type="success"
          icon="el-icon-check"
          @click="saveData"
          v-if="!isView"
          >保存</el-button
        >
        <el-button type="info" icon="el-icon-printer" @click="printForm"
          >打印</el-button
        >
      </span>
    </div>
    <h2>固定资产注销申请单</h2>
    <div style="float: right">
      NO：<input v-model="formData.no" :disabled="isView" />&emsp;
    </div>
    <div style="float: left">
      <label
        >&emsp;<input
          type="checkbox"
          v-model="formData.isEquipment"
          :disabled="isView"
        />
        设备&emsp;</label
      >
      <label
        ><input
          type="checkbox"
          v-model="formData.isInstrument"
          :disabled="isView"
        />
        仪器&emsp;</label
      >
      <label
        ><input
          type="checkbox"
          v-model="formData.isFixture"
          :disabled="isView"
        />
        治具&emsp;</label
      >
      <label
        ><input type="checkbox" v-model="formData.isTool" :disabled="isView" />
        工具&emsp;</label
      >
      <label
        ><input type="checkbox" v-model="formData.isOther" :disabled="isView" />
        其它</label
      >
    </div>
    <br />
    <div
      style="
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 5px 0px;
      "
    >
      <span>
        &emsp;<label>保管部门：</label>
        <input
          style="
            border: 0px;
            background-color: transparent;
            border-bottom: 1px solid black;
          "
          v-model="formData.custodyDepartment"
          :disabled="isView"
        />
      </span>
      <span>
        <label>申请日期：</label>
        <input
          v-model="formData.applicationDateYear"
          type="number"
          min="0"
          style="
            width: 60px;
            border: 0px;
            background-color: transparent;
            border-bottom: 1px solid black;
          "
          :disabled="isView"
        />
        年
        <input
          v-model="formData.applicationDateMonth"
          type="number"
          min="0"
          style="
            width: 40px;
            border: 0px;
            background-color: transparent;
            border-bottom: 1px solid black;
          "
          :disabled="isView"
        />
        月
        <input
          v-model="formData.applicationDateDay"
          type="number"
          min="0"
          style="
            width: 40px;
            border: 0px;
            background-color: transparent;
            border-bottom: 1px solid black;
          "
          :disabled="isView"
        />
        日
      </span>
      <span>
        <label
          ><input
            type="checkbox"
            v-model="formData.isScrapped"
            :disabled="isView"
          />
          报废&emsp;</label
        >
        <label
          ><input
            type="checkbox"
            v-model="formData.isLost"
            :disabled="isView"
          />
          遗失&emsp;</label
        >
        <label
          ><input
            type="checkbox"
            v-model="formData.isSoldAtDiscount"
            :disabled="isView"
          />
          折价出售</label
        >&emsp;
      </span>
    </div>
    <table border="1" style="width: 100%; text-align: center">
      <tr>
        <td>资产编号</td>
        <td><input v-model="formData.assetNumber" :disabled="isView" /></td>
        <td>资产名称</td>
        <td><input v-model="formData.assetName" :disabled="isView" /></td>
        <td>型 号</td>
        <td><input v-model="formData.model" :disabled="isView" /></td>
      </tr>
      <tr>
        <td>规 格</td>
        <td><input v-model="formData.specification" :disabled="isView" /></td>
        <td>购入日期</td>
        <td>
          <input
            v-model="formData.purchaseDate"
            type="date"
            :disabled="isView"
          />
        </td>
        <td>购入金额</td>
        <td>
          <input
            v-model="formData.purchaseAmount"
            type="number"
            min="0"
            :disabled="isView"
          />
        </td>
      </tr>
      <tr>
        <td>已摊折旧</td>
        <td>
          <input
            v-model="formData.depreciatedAmount"
            type="number"
            min="0"
            :disabled="isView"
          />
        </td>
        <td>残 值</td>
        <td>
          <input
            v-model="formData.residualValue"
            type="number"
            min="0"
            :disabled="isView"
          />
        </td>
        <td>预估损益</td>
        <td>
          <input
            v-model="formData.estimatedProfitLoss"
            type="number"
            min="0"
            :disabled="isView"
          />
        </td>
      </tr>
    </table>
    <table border="1" style="width: 100%; text-align: left">
      <tr>
        <td style="width: 10%">申请原因说明</td>
        <td>
          <textarea
            v-model="formData.applicationReason"
            style="width: 100%; height: 100px"
            :disabled="isView"
          ></textarea>
        </td>
      </tr>
      <tr>
        <td>建议处置方案</td>
        <td>
          <textarea
            v-model="formData.suggestedDisposalPlan"
            style="width: 100%; height: 100px"
            :disabled="isView"
          ></textarea>
        </td>
      </tr>
    </table>
    <table border="1" style="width: 100%; text-align: center">
      <tr>
        <td>总经理</td>
        <td><input v-model="formData.generalManager" :disabled="isView" /></td>
        <td>部长/总监</td>
        <td><input v-model="formData.director" :disabled="isView" /></td>
        <td>部门经理</td>
        <td>
          <input v-model="formData.departmentManager" :disabled="isView" />
        </td>
      </tr>
      <tr>
        <td>主 管</td>
        <td><input v-model="formData.supervisor" :disabled="isView" /></td>
        <td>保管人</td>
        <td><input v-model="formData.custodian" :disabled="isView" /></td>
      </tr>
    </table>
    <table border="1" style="width: 100%; text-align: center">
      <tr>
        <td style="width: 30%">总裁/董事长意见</td>

        <td>会专业部门意见</td>

        <td>会财务部意见</td>
      </tr>
      <tr>
        <td>
          <textarea
            v-model="formData.presidentOpinion"
            style="width: 100%; height: 80px"
            :disabled="isView"
          ></textarea>
        </td>
        <td>
          <textarea
            v-model="formData.specializedDepartmentOpinion"
            style="width: 100%; height: 80px"
            :disabled="isView"
          ></textarea>
          承办人：<input v-model="formData.undertaker1" :disabled="isView" />
        </td>
        <td>
          <textarea
            v-model="formData.financeDepartmentOpinion"
            style="width: 100%; height: 80px"
            :disabled="isView"
          ></textarea>
          承办人：<input v-model="formData.undertaker2" :disabled="isView" />
        </td>
      </tr>
    </table>
    <div
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <h3 style="float: left">注销核准申请</h3>
      <div style="float: right; padding: 10px 0px">
        <label>申请日期：</label>
        <input
          v-model="formData.approvalDateYear"
          type="number"
          min="0"
          style="
            width: 40px;
            border: 0px;
            background-color: transparent;
            border-bottom: 1px solid black;
          "
          :disabled="isView"
        />
        年
        <input
          v-model="formData.approvalDateMonth"
          type="number"
          min="0"
          style="
            width: 40px;
            border: 0px;
            background-color: transparent;
            border-bottom: 1px solid black;
          "
          :disabled="isView"
        />
        月
        <input
          v-model="formData.approvalDateDay"
          type="number"
          min="0"
          style="
            width: 40px;
            border: 0px;
            background-color: transparent;
            border-bottom: 1px solid black;
          "
          :disabled="isView"
        />
        日
      </div>
    </div>
    <table border="1" style="width: 100%; text-align: left">
      <tr>
        <td>处置结果报告</td>
        <td>
          <textarea
            v-model="formData.disposalResultReport"
            style="width: 100%; height: 100px"
            :disabled="isView"
          ></textarea>
        </td>
        <td>应附凭证</td>
        <td>
          <label
            ><input
              type="checkbox"
              v-model="formData.isSalesProof"
              :disabled="isView"
            />
            出售证明</label
          ><br />
          <label
            ><input
              type="checkbox"
              v-model="formData.isPaymentReceipt"
              :disabled="isView"
            />
            货款收受凭证</label
          ><br />
          <label
            ><input
              type="checkbox"
              v-model="formData.isMachineResume"
              :disabled="isView"
            />
            机器设备履历卡</label
          >
        </td>
      </tr>
    </table>
    <table border="1" style="width: 100%; text-align: center">
      <tr>
        <td>总经理</td>
        <td>主 管</td>
        <td>部长/总监</td>

        <td>部门经理</td>
      </tr>
      <tr>
        <td><input v-model="formData.generalManager2" :disabled="isView" /></td>
        <td><input v-model="formData.supervisor2" :disabled="isView" /></td>
        <td><input v-model="formData.director2" :disabled="isView" /></td>
        <td>
          <input v-model="formData.departmentManager2" :disabled="isView" />
        </td>
      </tr>
    </table>
    <table border="1" style="width: 100%; text-align: center">
      <tr>
        <td>总裁/董事长意见</td>
        <td>
          <textarea
            v-model="formData.presidentOpinion2"
            style="width: 100%; height: 80px"
            :disabled="isView"
          ></textarea>
        </td>
        <td>财务管理部意见</td>
        <td>
          <textarea
            v-model="formData.financeManagementOpinion"
            style="width: 100%; height: 80px"
            :disabled="isView"
          ></textarea>
        </td>
        <td>
          <label
            ><input
              type="radio"
              v-model="formData.isApproved"
              value="符合规定，同意注销"
              :disabled="isView"
            />
            符合规定，同意注销</label
          ><br />
          <label
            ><input
              type="radio"
              v-model="formData.isApproved"
              value="不符合规定，暂缓再议"
              :disabled="isView"
            />
            不符合规定，暂缓再议</label
          >
          <br />
          承办人：
          <input v-model="formData.undertaker3" :disabled="isView" />
        </td>
        <td>企业管理部意见</td>
        <td>
          <textarea
            v-model="formData.enterpriseManagementOpinion"
            style="width: 100%; height: 80px"
            :disabled="isView"
          ></textarea>
        </td>
      </tr>
    </table>
    <p
      style="
        display: flex;
        color: #757575;
        font-size: 0.9em;
        justify-content: space-between;
        padding: 10px 0px;
      "
    >
      <span>表单编号及版本：AM-JY-178 A/1</span> <span>保存期限：长期</span>
    </p>
  </div>
</template>

<script>
import {
  getFixedAssetCancellationDetail,
  saveFixedAssetCancellation,
} from "@/api/fixedAssetCancellation";
import { Message } from "element-ui";

export default {
  data() {
    return {
      pageType: "add", // add, edit, view
      formData: {
        id: null,
        no: this.generateRequestNo(),
        isEquipment: false,
        isInstrument: false,
        isFixture: false,
        isTool: false,
        isOther: false,
        custodyDepartment: "",
        applicationDateYear: new Date().getFullYear().toString(),
        applicationDateMonth: (new Date().getMonth() + 1).toString(),
        applicationDateDay: new Date().getDate().toString(),
        isScrapped: false,
        isLost: false,
        isSoldAtDiscount: false,
        assetNumber: "",
        assetName: "",
        model: "",
        specification: "",
        purchaseDate: "",
        purchaseAmount: 0,
        depreciatedAmount: 0,
        residualValue: 0,
        estimatedProfitLoss: 0,
        applicationReason: "",
        suggestedDisposalPlan: "",
        generalManager: "",
        director: "",
        departmentManager: "",
        supervisor: "",
        custodian: "",
        presidentOpinion: "",
        specializedDepartmentOpinion: "",
        financeDepartmentOpinion: "",
        undertaker1: "",
        undertaker2: "",
        approvalDateYear: "",
        approvalDateMonth: "",
        approvalDateDay: "",
        disposalResultReport: "",
        isSalesProof: false,
        isPaymentReceipt: false,
        isMachineResume: false,
        generalManager2: "",
        director2: "",
        departmentManager2: "",
        supervisor2: "",
        presidentOpinion2: "",
        financeManagementOpinion: "",
        isApproved: "",
        enterpriseManagementOpinion: "",
        undertaker3: "",
      },
    };
  },
  computed: {
    isView() {
      return this.pageType === "view";
    },
  },
  created() {
    this.initPageData();
  },
  methods: {
    printForm() {
      window.print();
    },
    // 初始化页面数据
    async initPageData() {
      const { id, type } = this.$route.query;
      if (type) {
        this.pageType = type;
      }

      if (id) {
        try {
          const response = await getFixedAssetCancellationDetail(id);
          if (response.data && response.data.code === 200) {
            this.formData = response.data.data;
          } else {
            Message.error(response.data.message || "获取详情失败");
          }
        } catch (error) {
          console.error("获取详情错误：", error);
          Message.error("获取详情失败：" + error.message);
        }
      }
    },

    // 生成申请单编号
    generateRequestNo() {
      const date = new Date();
      const year = date.getFullYear().toString().substr(2);
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const random = Math.floor(Math.random() * 1000)
        .toString()
        .padStart(3, "0");
      return `ZX${year}${month}${day}${random}`;
    },

    // 验证表单
    validateForm() {
      if (!this.formData.no) {
        Message.error("请填写申请单编号");
        return false;
      }

      if (!this.formData.custodyDepartment) {
        Message.error("请填写保管部门");
        return false;
      }

      if (
        !this.formData.applicationDateYear ||
        !this.formData.applicationDateMonth ||
        !this.formData.applicationDateDay
      ) {
        Message.error("请填写完整的申请日期");
        return false;
      }

      if (!this.formData.assetNumber) {
        Message.error("请填写资产编号");
        return false;
      }

      if (!this.formData.assetName) {
        Message.error("请填写资产名称");
        return false;
      }

      return true;
    },

    // 保存数据
    async saveData() {
      if (!this.validateForm()) {
        return;
      }

      try {
        const response = await saveFixedAssetCancellation(this.formData);
        if (response.data && response.data.code === 200) {
          Message.success("保存成功");
          this.$router.push("/main/xingzheng/gdzczhuxiao/gdzczhuxiaoList");
        } else {
          Message.error(response.data.message || "保存失败");
        }
      } catch (error) {
        console.error("保存错误：", error);
        Message.error("保存失败：" + error.message);
      }
    },
  },
};
</script>

<style scoped>
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
}

textarea {
  width: 100%;
  outline: none;
  border: 0px;
}

/* button {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #66b1ff;
} */

input {
  border: 0px;
}

input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

input:disabled,
textarea:disabled,
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
  opacity: 0.7;
}
input[type="checkbox"] {
  height: 13px;
}
@media print {
  .header {
    display: none;
  }
  textarea {
    resize: none !important;
  }
}
</style>